<template>
	<view >
		<view class="content">
			<view class="title">我的会员卡</view>
			<view class="sentence">当前用户手机号：{},若无会员卡，请移步至购卡商店购买，或者咨询教务老师</view>
		</view>
		<view class="card">
			<view class="name">
				<view class="name_t">体验课</view>
				<view class="name-s">充值</view>
			</view>
			<view class="words">
				<view class="word">卡类型：次卡（无限期）</view>
				<view class="word">到期日：永久可用</view>
				<view class="word">余额：{}次</view>
			</view>
			
		</view>
	</view>
</template>

<script>
</script>

<style>
	page {
		background: #F2F2F7;
	}
	
	.content{
		background-color: white;
	}
	
	.title{
		color: black;
		font-size: 20px;
		padding: 10px;
	}
	
	.sentence{
		padding: 0px 10px 10px ;
		font-size: 14px;
	}
	
	.card{
		background-color: white;
		margin: 10px;
		border-left: #00B88F solid 5px;
		border-radius: 5px;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	}
	
	.name{
		display: flex;
	}
	
	.name_t{
		font-size: 15px;
		font-weight: bold;
		padding:10px;
	}
	
	.name-s{
		background-color: #00B88F;
		width: 56px;
		height: 30px;
		font-size: 16px;
		margin: 10px 10px 10px 230px;
		padding: 4px 10px;
		border-radius: 5px;
	}
	
	.words{
		margin: -15px 0px 0px 0px;
		padding-bottom: 5px;
	}
	
	.word{
		padding: 3px 0px 0px 10px;
	}
	
</style>